<template>
  <div>
    <el-card style="width: 100%">
      <el-descriptions>
        <template slot="title">
          <el-avatar style="background: #409EFF;" icon="el-icon-user-solid"></el-avatar>
        </template>
        <template slot="extra">
          <el-button type="primary" size="mini" @click="changePasswordAction">修改密码</el-button>
        </template>
        
        <el-descriptions-item label="用户名">{{ userInfo.nick_name }}</el-descriptions-item>
        <el-descriptions-item label="账号">{{ userInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="账户余额">{{ userInfo.balance }}</el-descriptions-item>
        <el-descriptions-item label="app_key">
          {{ userInfo.app_key }}
        </el-descriptions-item>
        <el-descriptions-item label="app_secret">
          <span v-if="appSecret.length">{{ appSecret }}</span>
          <el-button v-else type="primary" size="mini" @click="showAppSecret" >查看</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { userCheckPassword } from '@/api/user';
import CryptoJS from 'crypto-js'
import ChangePassword from '@/views/user/changePassword';
export default {
  name: 'userInfo',
  data(){
    return {
      appSecret: ""
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods:{
    showAppSecret(){
      this.$prompt('请输入密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:  /\S/,
        inputType:'password',
        inputErrorMessage: '请输入密码'
      }).then(({ value }) => {
        userCheckPassword({ password:value }).then(res=>{
          this.$set( this, 'appSecret', res.data )
          this.$message({
            type: 'success',
            message: res.message
          });
        })
      }).catch(() => {});
    },
    changePasswordAction(){
      this.$createDialog({
        title: '修改密码',
        component: ChangePassword,
        width:"40%",
        buttons: [{ text: '提交', callback: 'handleSubmit', name: 'submit' }],
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.el-descriptions__title{
  width: 100% !important;
}
.product-box{
  background: rgb(242, 246, 252);height: 74px;
  margin: 10px 0!important;
  border-radius: 4px 4px 4px 4px!important;
  padding: 15px 20px;
  color: #606266;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-size: 16px;
}
</style>
